import {  Col, Row,  Popover, Button, Divider  } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import {useEffect, useState} from "react";
import {getHttp} from "../utils/http";
import {createData, getData} from "../utils/handleLocal";

const GitHubs = () => {
    const [cardList, setCardList] = useState([])
    const toMyFiv = (url) => {
        window.location = url
    }
    useEffect(() => {
        // getHttp('https://e.juejin.cn/resources/github/').then(res => console.log(res))
        // createData('cardList',cardsList)
        setCardList(getData('cardList'))
    },[])
    return(
        <div style={{marginBottom:'2%', marginTop:'2%'}}>
            <Divider orientation="left">GitHub热门 JavaScript</Divider>
            <Row gutter={24}>
                {
                    cardList.map(item => {
                        return(
                            <Col span={2} style={{ display:'flex', justifyContent: 'center', alignItems: 'center', }}  key={item.id}>
                                <Popover content={item.content} title={item.title}>
                                    <Button type="primary" shape={'round'} onClick={() => toMyFiv(item.url)}>{item.title}</Button>
                                </Popover>
                            </Col>
                        )
                    })
                }
            </Row>
        </div>

    )
}

export default GitHubs
